<template>
    <div class="factory">
        <div class="formArea">
            <el-form :model="createForm" ref="createForm" label-width="90px" size="mini">
                <el-form-item label="工厂编号">
                    <el-input v-model="createForm.code" disabled></el-input>
                </el-form-item>
                <el-form-item label="工厂名称">
                    <el-input v-model="createForm.name" :maxlength="120" disabled></el-input>
                </el-form-item>
                <el-form-item label="工厂地址">
                    <el-input v-model="createForm.address" :maxlength="120"></el-input>
                </el-form-item>
                <el-form-item label="合同到期日">
                    <el-input v-model="createForm.endTime" disabled></el-input>
                </el-form-item>
                <el-form-item label="云环境">
                    <el-input v-model="createForm.cloud" disabled></el-input>
                </el-form-item>
                <el-form-item label="产品">
                    <el-input v-model="createForm.product" disabled></el-input>
                </el-form-item>
                
            </el-form>
            <div class="logo">
                <el-upload 
                    action="" 
                    :http-request="upload"
                    :file-list="fileList"
                    accept="image/jpeg,image/jpg,image/png" 
                    :limit="1" :on-change="handleLimit" 
                    :class="{disabled:eqObj.uploadDisabled}" 
                    list-type="picture-card" 
                    :on-success="handleSuccess" 
                    :on-remove="handleRemove"
                    :before-upload='beforeUpload'
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </div>
            <p class="upTit">上传logo ↑</p>
        </div>
        <div class="btn">
            <el-button type="primary" size="small" @click="save">保存</el-button>
        </div>
        <div class="systomOperation">
            <hr class="line">
            <div class="title">系统操作</div>
            <el-button type="primary" size="small" @click="showFlag = true" class="clear">清空数据</el-button>
        </div>

        <el-dialog
            title=""
            :visible.sync="showFlag"
            width="30%"
            @close='clearClose'
            center>
            <p class="msg sure">您确定要清空所有数据吗？</p>
            <p class='msg pwd'>请输入管理员密码</p>
            <el-input v-model="password" placeholder="请输入管理员密码" type="password"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showFlag = false">取 消</el-button>
                <el-button type="primary" @click="sureDel">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { factoryMess, factoryEdit } from '@/api/userController'
    import { delAll } from '@/api/baseController'
    import request from '@/utils/request'
    export default {
        data() {
            return {
                createForm: {
                    code: '',
                    name: '',
                    address:'',
                    endTime: '',
                    cloud: '',
                    product: '',
                },
                password: '',
                showFlag: false,
                eqObj: {
                    uploadDisabled: true
                },
                fileList: [],
                file: {}
            }
        },
        mounted() {
            this.getFactoryMess()
        },
        methods: {
            getFactoryMess() {
                factoryMess({}).then(res => {
                    if(res.code == 200) {
                        this.createForm = res.data
                        this.$store.commit('setFactoryInfo',res.data)
                        if(res.data.logoUrl) {
                            this.fileList = [{
                                url: res.data.logoUrl
                            }]
                        }
                        if(this.fileList.length != 0) {
                            this.eqObj.uploadDisabled = true
                        } else {
                            this.eqObj.uploadDisabled = false
                        }
                    }
                })
            },
            //保存
            save() {
                this.$refs.createForm.validate((valid) => {
                    if (valid) {
                        if(this.file.raw) {
                            const formData = new FormData() //这一步不能变
                            formData.append('file', this.file.raw)
                            this.getUrl(formData).then(res => {
                                this.loading = false
                                if(res.code == 200) {
                                    let obj = {
                                        name: this.createForm.name,
                                        address:this.createForm.address,
                                        logoUrl: this.$global.uploadUrl + res.data
                                    }
                                    factoryEdit(obj).then(res => {
                                        if(res.code == 200) {
                                            this.utils.showMsg('修改成功', 'success')
                                        }
                                    })

                                }
                            }).catch(error => {
                                
                            })
                        } else {
                            let obj = {
                                name: this.createForm.name,
                                address:this.createForm.address,
                                logoUrl: null
                            }
                            factoryEdit(obj).then(res => {
                                if(res.code == 200) {
                                    this.utils.showMsg('修改成功', 'success')
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });
            },
            getUrl(data) {
                return request({
                    url: '/base/upload_file',
                    method: 'post',
                    data,
                })
            },
            // 上传之前
            beforeUpload(file) {
                let fielSize = file.size / 1024 / 1024
                if (fielSize > 1){  
                    this.$confirm('上传图片不超过1M', {
                        confirmButtonText: '好的',
                        showClose:false,
                        type: 'warning'
                    }).then(() => {}).catch(e =>{})           
                    return false;       
                }
            },
            // 成功
            handleSuccess(file) {

            },
            upload(param) {

            },
            // 移除
            handleRemove(file) {
                setTimeout(() => {
                    this.fileList = []
                    this.file = {}
                    this.eqObj.uploadDisabled = false
                }, 1200)
            },
            handleLimit(file, fileList) {
                this.fileList = fileList
                this.file = file
                if (fileList.length >= 1) {
                    this.eqObj.uploadDisabled = true;
                    this.$set(this.eqObj, 'uploadDisabled', true);
                } else {
                    this.eqObj.uploadDisabled = false;
                    this.$set(this.eqObj, 'uploadDisabled', false);
                }
                this.$forceUpdate();
            },

            sureDel() {
                delAll({password: this.password}).then(res => {
                    if(res.code == 200) {
                        this.showFlag = false
                    }
                })
            },
            clearClose() {
                this.password = ''
            }
        }
    }
</script>

<style lang="less" scoped>
    .factory {
        overflow: auto;
        .formArea {
            width: 420px;
            padding: 20px 0px 0px 20px;
            position: relative;
            .logo {
                width: 110px;
                height: 110px;
                // border: 1px solid red;
                position: absolute;
                right: -180px;
                top: 20px;
            }
            .upTit {
                font-size: #999;
                font-size: 14px;
                position: absolute;
                right: -180px;
                top: 180px;
            }
            .disabled /deep/.el-upload.el-upload--picture-card {
                display: none !important;
            }

            .disabled /deep/.el-button--success.is-plain {
                display: none !important;
            }
        }

        .btn {
            margin: 20px 0 0 47px;
            text-align: center;
            display: inline-block;
            width: 420px;

            /deep/ .is-plain {
                margin-right: 10px;
            }

            /deep/ .el-button {
                width: 130px;
                span {
                    margin-left: 0;
                }
            }
        }

        .systomOperation {
            padding-left: 20px;
            .line {
                margin: 35px 0;
                width: 500px;
            }
            .title {
                font-size: 12px;
                color: #1f273d;
                margin: 10px 0 0 10px
            }
            .clear {
                margin: 10px 0 0 10px;
                width: 150px;
            }
        }
        /deep/ .el-dialog__body {
            padding-top: 15px
        }
        /deep/ .el-range-editor--mini.el-input__inner {
            width: 100%;
        }

        /deep/ .el-range-editor.el-input__inner {
            width: 100%;
        }

        /deep/ .el-range-editor .el-range-input {
            flex: 7;
        }

        /deep/ .el-date-editor .el-range-separator {
            flex: 1;
        }

        /deep/ .el-input-group__append {
            background-color: #02b980;
            color: white;
        }
        /deep/ .el-message {
            width: 30px !important;
        }
        .msg {
            text-align: center;
            color: red;
        }
        .sure {
            font-size: 24px;
            margin-bottom: 24px;
        }
        .pwd {
            font-size: 14px;
            color: #333;
            text-align: left;
        }
    }
</style>